// ---
// Variables & Mixins
// ---

// colors
$main-blue: #0E6CE0;
$main-gd: linear-gradient(77.48deg, #339DE9 9.14%, #0059DC 100.08%);
$sub-gray: #CBD1DA;
$black: #333539; //同font-black
$white: #fff;
$red: #FF2B2B; //同font-red
$none: transparent;
$deco1: rgba(51, 153, 255, 0.22);

// bg
$bg-gd-light: linear-gradient(180deg, #F0F5FD 0%, #F7FBFF 100%);
$bg-light: #F2F3F5;
$bg-light2: #F0F5FD;
$bg-white: #fff;

// line
$line-gray: #ECECEC;
$line-blue: #DEE6F0;

// font
$font-blue: #0059DC;
$font-black: #333539;
$font-gray: #6C6E73;
$font-blue-gray: #A9B4C1;
$font-red: #FF2B2B;
$font-white: #fff;

// shadows
$L: 0px 4px 25px rgba(0 ,52 ,99 , 0.1) ;
$M: 0px 0px 15px rgba(25, 50, 72, 0.08);
$S: 0px 0px 13px rgba(25, 36, 51, 0.04);

/* brand */
$brand-line: #4ecd00;
$brand-facebook: #4267b2;
$brand-google: #ea4335;

// fonts
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+TC:wght@300;400;500&display=swap');
$font-default: "Lato", "Noto Sans TC", "Noto Sans SC", "Arial", sans-serif;
$font-en: "Lato", "Noto Sans TC", "Noto Sans SC", sans-serif;
$font-ch: "Lato", "Noto Sans SC", sans-serif;

@function pow($base, $exponents) {
  $raised: 1;
  @if $exponents > 0 {
    @for $i from 1 through $exponents {
      $raised: $raised * $base;
    }
  }
  @return $raised;
}

// 無條件捨去到小數點第 $n 位
@function floorD($number, $n: 0) {
  $p: pow(10, $n);
  @return floor($number * $p) / $p;
}

@function px2rem($px) {
  @return floorD($px/16px, 2) * 1rem;
}

// 製作 margin & padding
@mixin m($direction, $size) {
  margin-#{$direction}: $size !important;
}
@mixin p($direction, $size) {
  padding-#{$direction}: $size !important;
}

// 自訂 Breakpoint
// Bootstrap 原生斷點：576, 768, 992, 1200
// 擴充：1400, 1600

$device: (
        xlpc: 1600px,
        pc: 1400px,
        nb: 1200px,
        xlpad: 992px,
        pad: 769px,
        phone: 576px,
);

// 取得自訂斷點
/* 例如:
  @include device(pc);
  得到 1400px
*/
@function device($name) {
  @return map-get($device, $name);
}

// Responsive Media Query
// (to-pc 為 指定斷點以上的螢幕, to-mb 為指定斷點以下得螢幕)
/*
例如：
  @include res(pad, to-pc) {...}
  等同於
  @media all and (min-width: 768px) {...}

  @include res(pad, to-mb) {...}
  等同於
  @media all and (max-width: 767px) {...}
*/
@mixin res($selected, $mode: to-pc) {
  @if $mode == to-pc {
    @media all and (min-width: device($selected)) {
      @content;
    }
  }
  @if $mode == to-mb {
    $size: device($selected) - 1px;
    @media all and (max-width: $size) {
      @content;
    }
  }
}

// utilities

// icon - FontAwesome: https://fontawesome.com/icons?d=gallery&m=free
@mixin fa {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

// 寬高比 1:1
@mixin square($size) {
  width: $size;
  height: $size;
}

// create customized grids container
/*
  for example:

  .grids-3{
    @include setgrids(3,12px);
  }

  在.grids-3底下的children會以3個一列，彼此間距為12px

  .grids-4{
    @include setgrids(2,12px,[[pad,3,16px],[pc,4,20px]]);
  }

  在.grids-4底下的children在pc以上的裝置會以4個一列，彼此間距為20px
                         在pad-pc的裝置會以3個一列，彼此間距為16px
                         在pad以下的裝置會以2個一列，彼此間距為12px

*/
@mixin setgrids(
  $number,
  $gap,
  $res: ((device: "xlpc"), (res-number: "2"), (res-gap: $gap))
) {
  $grid-width: 100%;
  $calcgap: false;
  @if $number > 1 {
    @if $gap > 0px {
      $calcperc: floorD(100 / $number, 2) * 1%;
      $calcgap: $gap * ($number - 1) / $number;
      $grid-width: calc(#{$calcperc} - #{$calcgap});
    } @else {
      $grid-width: 100% / $number;
    }
  }

  display: flex;
  flex-wrap: wrap;
  > * {
    flex-basis: $grid-width;
    max-width: $grid-width;
    @if ($gap != 0px) {
      margin-bottom: $gap;
    }
    @if ($calcgap) {
      &:not(:nth-child(#{$number}n + #{$number})) {
        margin-right: $gap;
      }
      &:nth-child(#{$number}n + #{$number}) {
        margin-right: 0;
      }
    }
    @if ($res) {
      @each $i in $res {
        $r-dev: nth($i, 1);
        $r-num: nth($i, 2);
        $r-gap: if(length($i) >2, nth($i, 3), $gap);
        @include res($r-dev) {
          $r-calcperc: floorD(100 / $r-num, 2) * 1%;
          $r-calcgap: $r-gap * ($r-num - 1) / $r-num;
          margin-bottom: $r-gap;
          &:not(:nth-child(#{$r-num}n + #{$r-num})) {
            margin-right: $r-gap;
          }
          &:nth-child(#{$r-num}n + #{$r-num}) {
            margin-right: 0;
          }
          $r-grid-width: calc(#{$r-calcperc} - #{$r-calcgap});
          @if $r-gap == 0px {
            $r-grid-width: $r-calcperc;
          }
          flex-basis: $r-grid-width;
          max-width: $r-grid-width;
        }
      }
    }
  }
}
// 寬高比固定, 且背景設定置中
@mixin imgbox($ratio, $minheight: null) {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  &:before {
    content: "";
    display: block;
    @if ($minheight) {
      min-height: $minheight;
    }
    width: 100%;
    padding-bottom: $ratio;
  }
}
// for example：
// $line = 2, $lineheight: 1.5em
// 代表文字最多呈現兩行，超過兩行則隱藏 (行高設定為 1.5em )
@mixin textbox($line, $lineheight: 2em) {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: $lineheight;
  -webkit-line-clamp: $line;
  height: ($lineheight * $line);
}

// 設定 flexbox
// 若 $align = center，則水平、垂直皆置中
// 若 $align = x，則水平置中
@mixin flexbox($align) {
  display: flex;
  @if ($align == center) {
    align-items: center;
    justify-content: center;
  } @else if($align == x) {
    justify-content: center;
  } @else if($align == y) {
    align-items: center;
  }
}
// 正圓形且帶有背景的容器
// 內容預設水平、垂直置中
@mixin oval($size, $bg) {
  width: $size;
  height: $size;
  border-radius: 50%;
  background: $bg;
  @include flexbox(center);
}

// 滿版背景（絕對位置）
@mixin overlay($bg) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $bg;
}

@mixin absolute($perc) {
  top: $perc;
  left: $perc;
  right: $perc;
  bottom: $perc;
}
// 設定 瀏覽器捲軸 的樣式
@mixin scrollbar($width, $bg, $color, $hover) {
  $scrollbar: -webkit-scrollbar;
  ::#{$scrollbar} {
    width: $wid;
    height: $width;
  }
  ::#{$scrollbar}-track {
    background: $bg;
  }
  ::#{$scrollbar}-thumb {
    background: $color;
  }
  ::#{$scrollbar}-thumb:hover {
    background: $hover;
  }
}

// 設定動畫
@mixin transition($property, $time, $method) {
  -webkit-transition: $property $time $method;
  -moz-transition: $property $time $method;
  -ms-transition: $property $time $method;
  -o-transition: $property $time $method;
  transition: $property $time $method;
}
